<script setup>
import {
  getDocNotifyMessagePageList, getDocumentBasicInfo,
  markDocMessage
} from "@/api/document/notifyMessage.js";
import useLoginUserStore from "@/store/modules/user.js";
import router from "@/router/index.js";

const {proxy} = getCurrentInstance()
const loginUserStore = useLoginUserStore()
const messageList = ref([])
const loading = ref(false)
const total = ref(0)
const prop = defineProps({
  title: {
    type: String
  }
})
const title = ref(prop.title || '通知消息')

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    status: '未读',
  }
})
const {queryParams} = toRefs(data)

onMounted(() => {
  getList()
})

function getList() {
  loading.value = true
  getDocNotifyMessagePageList(proxy.addDateRange(queryParams.value)).then(res => {
    loading.value = false
    messageList.value = res.list
    total.value = res.total
  })
}

/** 标记为已读 */
function handleUpdate(message) {
  markDocMessage([message.id]).then(() => {
    const docId = message.sourceId
    const module = message.module
    getDocumentBasicInfo(docId).then((document) => {
      if (module === '我的公文') {
        router.push({ path: '/document/my/view/' + docId , query: {customTitle: '我的公文 - ' + document.subject}})
      } else if(module === '办理公文') {
        if (message.userId === loginUserStore.id) {
          router.push({ path: "/document/process/view/" + docId, query: {customTitle: '待办公文 - ' + document.subject, status: '待办'}})
        } else {
          router.push({ path: "/document/process/view/" + docId, query: {customTitle: '已办公文 - ' + document.subject, status: '已办'}})
        }
      } else if(module === '单位收文') {
        router.push({ path: '/document/exchange/receive/view/' + docId , query: {customTitle: '公文交换 - ' + document.subject}})
      }
    })
    getList()
  })
}

function loadMore() {
  router.push({ path: '/document/notifyMessage'})
}

</script>

<template>
  <el-card shadow="never" style="min-height: 50px;">
    <el-row class="mb20">
      <el-col :span="12" style="text-align: left">
        <el-badge :value="messageList.length" :max="99" class="item">
          <el-text style="font-size: 16px;" type="primary" link>{{title}}</el-text>
        </el-badge>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="primary" link @click="loadMore" v-if="total > 0">more<el-icon><DArrowRight/></el-icon></el-button>
      </el-col>
    </el-row>

    <el-row v-loading="loading" v-for='item in messageList' :key="item.id" class="custom-row">
      <el-col :span="24">
        <el-row class="custom-item" @click="handleUpdate(item)">
          <el-col :span="16"><el-text truncated>{{item.message}}</el-text></el-col>
          <el-col :span="8" style="text-align: right;">
            {{item.createTime}}
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </el-card>
</template>

<style scoped lang="scss">
.custom-row {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
  border-bottom: #ebeef5 1px solid;
}

.custom-item {
  cursor: pointer;
  padding: 5px;
}

.custom-item:hover {
  background-color: #fafafa;
}
</style>
